<template>
  <div class="source_box">
    <div class="titlename">
      <!-- <router-link class="more_sorce" to="#" >更多>></router-link> -->
    </div>
    <div class="szRouces">
      <!-- <div class="source_list" v-for="(list, index) in fmtData" :key="index">
        <router-link :to="{
          name: 'szSource',
          params: {
            id:list.data.id,
            postDatas:list
          }
        }"  target="_blank">
         
            <div class="img_box">
              <img :src="JSON.parse(list.data.content).titlePicFile.OriginUrlPass" alt="思政资源图片">
             
            </div>
            <div class="introduce_msg">
              <p class="textMsg">{{JSON.parse(list.data.content).courseTitle}}</p>
            </div>
             <div class="lookCount">
              <div>{{list.data.createTime.split(" ")[0]}}</div>
              <div class="lok">
                <i class="el-icon-chat-dot-round"></i>&nbsp;{{list.countDTO.commentTotal}}
                <i class="iconfont icon-dianzan applod"></i>&nbsp;{{list.countDTO.likeTotal}}
              </div>
            </div>
        </router-link>
       </div> -->
      <div class="post-container">
        <div v-for="(item, index) in dataLists" :key="index">
          <postDemo :postData="item"></postDemo>
        </div>
        <div v-if="!noneData">
          <div class="load-more" @click="loadData()" v-show="showData">
            <!-- 当有帖子数据的时候展示加载更多否则不展示 -->
            点击加载更多..
          </div>
          <div class="load-more" v-show="!showData">
            <!-- 当有帖子数据的时候展示加载更多否则不展示 -->
            暂无更多数据...
          </div>
        </div>
        <div v-if="noneData" class="none-data">
          <div><noneDataPage></noneDataPage></div>
        </div>
      </div>
      <!-- <div class="post-notice">
        <div class="title-notice-pic">
          <img src="@/assets/szptImages/images/miyouji.png" alt="" srcset="" />
        </div>

        <div class="qrCode-container">
          <div class="cdn-dev">
            <div class="title">
              <span
                >关于我们<i
                  class="el-icon-phone-outline"
                  style="color: rgb(0, 195, 255)"
                ></i
                >：</span
              >
            </div>
            <div class="container-cdn">
              <div style="width: 100px; hight: 100px">
                <img
                  src="@/assets/szptImages/images/R-C.png"
                  alt=""
                  srcset=""
                />
              </div>
            </div>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import szSourceMin from "./szSourceMin.vue";
import postDemo from "@/components/szptPage/postDemo/index.vue";
import { getPostList } from "@/api/szpt/getPostList.js";
import noneDataPage from "@/components/szptPage/noneDataPage/index.vue";
export default {
  name: "szSourceMin",
  data() {
    return {
      dataLists: [],
      // 初始是否有数据展示
      noneData: true,
      // 数据加载是否完成
      navigatorCode: undefined,
      showData: true,
      pageNum: 1,
      pageSize: 10,
    };
  },
  components: {
    szSourceMin,
    postDemo,
    noneDataPage,
  },
  methods: {
    getList() {
      this.$modal.loading("玩命加载中....");
      getPostList(this.navigatorCode, this.pageNum, this.pageSize).then(
        (resp) => {
          // 当获取的帖子数据
          if (resp.data.list && resp.data.total === 0) {
            this.noneData = true;
            this.$modal.closeLoading();
          } else {
            this.noneData = false;
            if (resp.data.pageInfo) {
              this.dataLists = this.dataLists.concat(resp.data.pageInfo.list);
            }
            this.$modal.closeLoading();
          }
        }
      );
    },
    loadData() {
      this.showData = false;
      this.pageNum = this.pageNum + 1;
      this.getList();
      console.log("用户加载更多数据....", this.pageNum, this.pageSize);
    },
    /**
     * 初始化思政资源
     */
    initSzSourceMin() {
      this.getList();
    },
  },
  computed: {
    fmtData() {
      return this.$store.state.soure.SourceList;
    },
  },
  created() {
    // this.$store.dispatch('soure/initSourceList')
    this.getDicts("szpt_pagenum_pagesize").then((response) => {
      this.pageNum = parseInt(response.data[0].dictValue);
      this.pageSize = parseInt(response.data[1].dictValue);
      // 初始化菜单
    });
  },

  mounted() {
    // 获取当前所属路由id
    this.navigatorCode = this.$route.query.id;
    //  获取分页系数
    this.getList();
  },
};
</script>

<style lang="scss" scoped>
/**
 * 这部分代码为表面盒子
 */
.lok {
  font-size: 16px;
}
.source_box {
  height: auto;
  width: 100%;
  height: auto;
  border-radius: 10px;
  background-color: transparent;
}
.szRouces {
  width: 100%;
  height: auto;
  min-height: 400px;
  display: flex;
  text-decoration: none;
  flex-wrap: wrap;
  justify-content: flex-start;
  background-color: transparent;

  .post-container {
    width: 75%;
    height: 100%;
    min-height: 700px;
    background-color: #ffff;
    border-radius: 10px;
    overflow: hidden;
    .load-more {
      width: 100%;
      height: 55px;
      line-height: 55px;
      cursor: pointer;
      color: rgb(0, 195, 255);
      text-align: center;
    }
    .load-more:hover {
      color: rgb(0, 195, 255);
    }
  }
  .post-notice {
    width: 20%;
    height: 100%;
    margin-left: 30px;
    min-height: 300px;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    .title-notice-pic {
      width: 150px;
      float: left;
      height: 100px;
      z-index: 2;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .qrCode-container {
      width: 100%;
      height: 160px;
      border-radius: 8px;
      background-color: white;
      display: flex;
      justify-content: center;
      padding-bottom: 30px;
      align-items: center;
      .cdn-dev {
        width: 100%;
        .title {
          width: 100%;
          height: 30px;
          font-size: 14px;
          line-height: 30px;
          color: #999;
          padding-left: 20px;
          text-align: left;
        }
        .container-cdn {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
.source_list a {
  width: 270px;
  height: 270px;
  margin-bottom: 10px;
  display: inline-block;
  text-decoration: none;
  border-radius: 10px;
}
.source_list {
  background-color: rgb(255, 255, 255);
  border-radius: 10px;
  overflow: hidden;
  margin: 10px 15px;
}
.source_list:hover {
  box-shadow: 10px 10px 5px rgb(229, 229, 229);
}
.img_box img {
  width: 100%;
  height: 170px;
  display: block;
  object-fit: cover;
}
.introduce_msg {
  padding: 5px;
  width: 100%;
  height: 70px;
  font-size: 18px;
  color: #666;
  overflow: hidden;
  border-radius: 10px;
  background-color: transparent;
}
p.textMsg {
  width: 100%;
  word-wrap: break-word;
}
.lookCount {
  width: 100%;
  color: #999;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}
/**
 * 更多资源样式
 */
.more_sorce {
  font-size: 18px;
  position: relative;
  right: 0;
  background-color: transparent;
  float: right;
  color: #999;
}
.none-data {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
  color: #999;
  font-size: 18px;
}
</style>
